<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宽高自适应正方形</title>
    <style>
        /* 
            1.使用vw
            2.使用padding-top   
            3.伪元素
        
         */
        /*       .square {
            width: 10%;
            height: 10vw;
            border: 1px solid orange;
        } */

        /*   .square {
            width: 20%;
            height: 0;
            padding-top: 20%;
            background: orange;
        } */

        .square {
            width: 30%;
            overflow: hidden;
            background: yellow;
        }

        .square::after {
            content: '';
            display: block;
            margin-top: 100%;
        }
    </style>
</head>

<body>
    <div class="square"></div>
</body>

</html>